<!-- 暂未使用 -->
<template>
  <div>
    <div style="background: #f3f3f6;padding:0.5rem 1rem;text-align: left;cursor: pointer">
      <p style="font-weight: bold;margin: 0.5rem 0">产品集合基本信息<Icon type="ios-arrow-down" style="color: #757575;margin-left: 0.3rem"/></p>
      <KeyValueView title="标题" :value="baseInfo.title" oneline></KeyValueView>
      <KeyValueView title="类型" :value="collectionTypeName" oneline></KeyValueView>
      <KeyValueView title="关联分类" :value="categoryName" oneline></KeyValueView>
      <KeyValueView title="搜索关键词" :value="baseInfo.keyword" v-if="baseInfo.hasKeyword" oneline></KeyValueView>
      <KeyValueView title="搜索日期" :value="searchDate" v-if="baseInfo.hasDate" oneline></KeyValueView>

        <div v-if="baseInfo.filters.length>0">
          <span style="color: #999;">产品集合过滤条件：</span>
          <Tag v-for="(filter, index) in baseInfo.filters" :key="index" color="blue">
            {{filter.field}} :
            <template v-if="isPriceFilter(filter.field)">
              {{getPriceValues(filter)}}
            </template>
            <template v-else-if="isSortFilter(filter.field)">
              {{getSortFilterName(filter.value)}}
            </template>
            <template v-else-if="isDateFilter(filter.field)">
              {{getDateRange(filter)}}
            </template>
            <template v-else>
              {{filter.value}}
            </template>
          </Tag>
        </div>
      <KeyValueView title="屏蔽接口" v-if="baseInfo.returnFilters.length>0" :value="returnFilterCnNames"></KeyValueView>
      <div style="background: #f3f3f6; padding: 0 1rem 0.5rem 0;text-align: left;cursor: pointer; text-align: right;" >
        <Button size="small" type="info" ghost @click="showModifyCollectionModal()">编辑基本信息</Button>
      </div>
    </div>
    <div v-if="isCustomType" style="margin-top: 10px;">
      <Row  justify="end">
        <Button type="info" icon="md-add" class="y_condition" @click="showAddProductsModal()" style="margin-left: 20px;">新增产品</Button>
      </Row>
      <Divider size="small"></Divider>
      <Row type="flex" justify="end" :gutter="16" style="margin-bottom: 1rem">
        <Cascader :data="categoryList" @on-change="categorySelected" change-on-select clearable placeholder="产品分类"
                  class="y_condition" style="text-align: left; min-width: 300px;"></Cascader>
        <Input type="text" v-model.trim="addedProductSearchParam.search" clearable placeholder="产品SKU编号或产品名称"
               class="y_condition" style="min-width: 200px;"></Input>
        <Select v-model="addedProductSearchParam.state" class="y_condition" placeholder="产品状态" clearable>
          <Option v-for="item in productStates" :value="item.value" :key="item.value">{{item.label}}</Option>
        </Select>
        <DatePicker type="daterange" :options="datePickerOptions" placement="bottom-end" :editable="false" placeholder="上/下架时间"
                    @on-change="changeTimeParam" class="y_condition" v-model="addedProductSearchParam.selectedDate" style="max-width: 220px; width: 220px; text-align: left;"></DatePicker>
        <Button type="primary" icon="md-search" class="y_condition" @click="searchAddedProducts()">查询</Button>
      </Row>
      <List border style="margin: 1rem 0rem">
        <div v-if="productAddedList==null || productAddedList.length==0">
          <ListItem><div style="width: 100%; text-align: center;">暂无数据</div></ListItem>
        </div>
        <div v-else>
          <ListItem v-for="item in productAddedList" :key="item.id">
            <Row style="width: 100%" :gutter="32">
              <Col :xs="10" :sm="8" :md="6" :lg="4" class-name="item_left" style="text-align: center;">
                <Img :src="getProductImage(item.product)" style="max-width: 100%; max-height: 100px;" v-if="item.product != null"></Img>
              </Col>
              <Col :xs="14" :sm="16" :md="18" :lg="20" class-name="item_right" style="padding-bottom: 40px;">
                <KeyValueView title="序号" :value="'#'+item.sequence" oneline></KeyValueView>
                <template v-if="item.product == null">
                  <KeyValueView title="产品"><span style="color: red;">已被删除</span></KeyValueView>
                </template>
                <template v-else>
                  <KeyValueView title="产品编号" :value="item.product.code" oneline></KeyValueView>
                  <KeyValueView title="产品名称" :value="item.product.name" oneline></KeyValueView>
                  <KeyValueView title="上/下架时间" :value="$tiyBJTime(item.product.lastmodify)" oneline></KeyValueView>
                  <div style="position: absolute; top: 10px; right: 20px;">
                    <Tag :color="getProductStateColor(item.product.state)">{{getProductState(item.product.state)}}</Tag>
                  </div>
                </template>

                <div style="position: absolute; bottom: 0px; right: 20px;">
                  <Button size="small" style="margin: 0 0.5rem" @click="showModifyProductModal(item)">修改序号</Button>
                  <Button size="small" @click="deleteProduct(item)">删除</Button>
                </div>
              </Col>
            </Row>
          </ListItem>
        </div>
      </List>
      <div style="text-align: right;">
        <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
              @on-change="changeProductAddedPageNum" @on-page-size-change="changeProductAddedPageSize" :page-size-opts="page.options"
              show-sizer show-elevator/>
      </div>

      <!-- 新增产品条目 -->
      <Modal v-model="productsStatus.modalAdd.isShow" title="新增产品条目" width="1000" :mask-closable="false">
        <product-selection @query-list="queryProductList"></product-selection>
        <div slot="footer">
          <Button @click="hideAddProductsModal()">取消</Button>
          <Button type="primary" @click="showAddProductSequenceModal()">确定</Button>
        </div>
      </Modal>

      <!-- 产品条目序号 -->
      <Modal v-model="productsStatus.modalSequence.isShow" title="产品条目序号" :mask-closable="false">
        <Form ref="addProductSequenceForm" :model="productAddParam" label-colon :rules="productRules">
          <FormItem label="序号" :label-width="100" prop="sequence">
            <Input type="number" v-model="productAddParam.sequence" style="width: 300px;"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="hideAddProductSequenceModal()">取消</Button>
          <Button type="primary" @click="addProducts()">确定</Button>
        </div>
      </Modal>

      <!-- 修改产品条目 -->
      <Modal v-model="productsStatus.modalModify.isShow" title="修改产品条目序号" :mask-closable="false">
        <Form ref="modifyProductForm" :model="productModifyParam" label-colon :rules="productRules">
          <FormItem label="序号" :label-width="100" prop="sequence">
            <Input type="number" v-model="productModifyParam.sequence" style="width: 300px;"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button @click="hideModifyProductModal()">取消</Button>
          <Button type="primary" @click="modifyProduct()">确定</Button>
        </div>
      </Modal>
    </div>

    <!-- 产品集合 -->
    <Modal v-model="collectionStatus.modalModify.isShow" title="产品集合" :mask-closable="false" :width="700">
      <collection-form ref="modifyCollection" :collection-model="collectionModel"></collection-form>
      <div slot="footer">
        <Button @click="hideModifyCollectionModal()">取消</Button>
        <Button type="primary" @click="modifyCollection()">保存</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import commonData from "./js/stand/common_data";
import tiyData from "./js/stand/collection_data";
import productData from "./productSelect/js/productData";
import {
  initCollectionInfo,
  showAddProductsModal,
  addProducts,
  modifyProduct,
  afterDeleteProduct,
  queryAddedProductList,
  initAddedProductListSearchParam, queryProductList, modifyCollection, getReturnFilterCnNames,
} from "./js/stand/collection_funs";

import {deleteProduct} from "./js/stand/edit_funs";

import ProductSelection from "./productSelect/ProductSelection";
import {createCategoryCascader, createCategoryList, getProductCommonData, isEmpty, isNotEmpty} from "../js/commonUtils";
import KeyValueView from "../widgets/KeyValueView";
import CollectionForm from "./CollectionForm";
import {showModifyCollectionModal} from "./js/stand/collection_funs";


export default {
  name: "CollectionProducts",
  props: {
    collectionId: {type: String, required: true},
    boothItemId: {type: String, required: true},
    modifyTime: {type: Number, required: true},
  },
  data() {
    return {
      yunPath: this.$store.getters.imgPrefix,
      baseInfo: tiyData.tData.collectionBaseInfo,
      productAddedList: tiyData.tData.productAddedList,
      page: tiyData.tPage,
      productsStatus: tiyData.tStatus.product,
      productModifyParam: tiyData.tParam.editParam.product,
      productAddParam: tiyData.tParam.addParam.products,
      productRules: commonData.rules.productRules,
      categoryList: commonData.categoryList,
      addedProductSearchParam: tiyData.tParam.searchParam,
      productStates: productData.tStatus.states,
      collectionStatus: tiyData.tStatus.collection,
      collectionModel: tiyData.tParam.editParam.collection,
      datePickerOptions: productData.tStatus.datePickerOptions,
    };
  },
  components: {
    ProductSelection, KeyValueView, CollectionForm,
  },
  methods: {
    isPriceFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "price";
    },
    getPriceValues(filter) {
      if(isNotEmpty(filter.startValue) && isNotEmpty(filter.endValue)) {
        return "$"+filter.startValue + "~$" + filter.endValue;
      }
      if(isNotEmpty(filter.startValue)) {
        return "> $"+filter.startValue;
      }
      if(isNotEmpty(filter.endValue)) {
        return "< $"+filter.endValue;
      }
      return "";
    },
    isSortFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "sortby";
    },
    isDateFilter(field) {
      return isNotEmpty(field) && field.toLowerCase() == "date";
    },
    getSortFilterName(value) {
      switch (parseInt(value)) {
        case 1:
          return "Order By Newest";
        case 2:
          return "Order By Lowest Price";
        case 3:
          return "Order By Highest Price";
      }
      return "";
    },
    getDateRange(filter) {
      if(isNotEmpty(filter.startDate) && isNotEmpty(filter.endDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "~" + Vue.prototype.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd");
      }
      if(isNotEmpty(filter.startDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.startDate).getTime(), "yyyy-MM-dd") + "以前";
      }
      if(isNotEmpty(filter.endDate)) {
        return Vue.prototype.$tiyBJTime(new Date(filter.endDate).getTime(), "yyyy-MM-dd") + "以后";
      }
      return "";
    },
    showModifyCollectionModal() {
      showModifyCollectionModal(this, this.boothItemId);
    },
    hideModifyCollectionModal() {
      tiyData.tStatus.collection.modalModify.isShow = false;
    },
    modifyCollection() {
      modifyCollection(this);
    },
    getProductState(state) {
      let element = productData.tStatus.states.find(element => element.value == state);
      return element==null?"":element.label;
    },
    formatDate(date) {
      return date==null?"":this.$tiyBJTime(date);
    },
    getProductStateColor(state) {
      switch(state) {
        case productData.tStatus.stateOnline:
          return "#19be6b";
        case productData.tStatus.stateOffline:
          return "#c5c8ce";
        case productData.tStatus.stateDeleted:
          return "#ed4014";
        case productData.tStatus.stateNew:
          return "#2db7f5";
        default:
          return "#2db7f5";
      }
    },
    showModifyProductModal(item) {
      this.$refs.modifyProductForm.resetFields();
      tiyData.tParam.editParam.product.collectionId = item.collectionId;
      tiyData.tParam.editParam.product.productId = item.productId;
      tiyData.tParam.editParam.product.sequence = item.sequence;
      tiyData.tStatus.product.modalModify.isShow = true;
    },
    hideModifyProductModal() {
      tiyData.tStatus.product.modalModify.isShow = false;
    },
    modifyProduct() {
      modifyProduct(this);
    },
    deleteProduct(item) {
      deleteProduct(this, item, afterDeleteProduct);
    },
    changeProductAddedPageNum(pageNum) {
      tiyData.tPage.pageNum = pageNum;
      queryAddedProductList(this);
    },
    changeProductAddedPageSize(pageSize) {
      tiyData.tPage.pageSize = pageSize;
      queryAddedProductList(this);
    },
    queryProductList(params) {
      queryProductList(this);
    },
    showAddProductsModal(){
      showAddProductsModal(this);
    },
    hideAddProductsModal() {
      tiyData.tStatus.product.modalAdd.isShow = false;
    },
    hideAddProductSequenceModal() {
      tiyData.tStatus.product.modalSequence.isShow = false;
    },
    showAddProductSequenceModal() {
      if(productData.tData.selectedList==null || productData.tData.selectedList.length==0) {
        this.$Message.error("请选择要添加的产品！");
        return;
      }
      tiyData.tParam.addParam.products.sequence = 10000;
      tiyData.tStatus.product.modalSequence.isShow = true;
    },
    addProducts() {
      addProducts(this);
    },
    searchAddedProducts() {
      queryAddedProductList(this);
    },
    categorySelected(value, selectedData) {
      //选择分类后的条件如果改变后要修改productBatchSequenceView方法里的判断条件
      if (0 < selectedData.length) {
        tiyData.tParam.searchParam.categoryId = selectedData[selectedData.length - 1].value;
        tiyData.tParam.searchParam.categoryLevel = selectedData[selectedData.length - 1].level;
      } else {
        tiyData.tParam.searchParam.categoryId = '';
        tiyData.tParam.searchParam.categoryLevel = 1;
      }
    },
    changeTimeParam(dateArr, type) {
      this.addedProductSearchParam.startTime = dateArr[0];
      this.addedProductSearchParam.endTime = dateArr[1];
    },
    getProductImage(product) {
        if(isNotEmpty(product.showImage)) {
            return this.yunPath + product.showImage.originalImagePath;
        }
        if(isNotEmpty(product.colorTryImg)) {
            let colorImgs = this.$toJson(product.colorTryImg);
            let defaultImg = colorImgs.find(element => element.isDefault);
            let image = defaultImg?defaultImg : colorImgs[0];
            if(image){
                return this.yunPath + image.colorMainImg.imagePath;
            }
        }
        return "";
    },
  },
  computed: {
    isCustomType() {
      return this.baseInfo.type == commonData.collectionDic.customType;
    },
    isKeywordType() {
      return this.baseInfo.type == commonData.collectionDic.keywordType;
    },
    collectionTypeName() {
      let element = commonData.collectionDic.types.find(element => element.value == this.baseInfo.type);
      return element?element.label:"";
    },
    categoryName(){
      let classificationId = this.baseInfo.classificationId;
      if(classificationId){
        let category = commonData.categoryList.find(item=>{return item.value == classificationId })
        if(category){
          return category.label;
        }
      }
      return "";
    },
    searchDate(){
      if(this.baseInfo.hasDate){
        if(this.baseInfo.publishedEndDate){
          return this.baseInfo.publishedStartDate+' - '+this.baseInfo.publishedEndDate
        }else{
          return ">= "+this.baseInfo.publishedStartDate;
        }
      }
    },
    returnFilterCnNames() {
      return getReturnFilterCnNames(this.baseInfo.returnFilters);
    },
  },
  watch: {
    modifyTime() {
      initAddedProductListSearchParam(this.collectionId);
      initCollectionInfo(this, this.collectionId);
    },
  },
  mounted() {
    if(commonData.categoryList.length == 0) {
      let types = [];
      types.push(3);//查询产品分类
      getProductCommonData(this, commonData.categoryList, types, true, createCategoryCascader);
    }
  },
}
</script>

<style scoped lang="less">
@import  (once,optional)  "../css/base.less";
.item_right {
  border-left: solid 1px @tiyBorderColor;
  text-align: left;
  .flex-colum-wrap;
}
</style>
